<template>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <button class=" menu-button" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <img class="menu-iocn" src="@/assets/img/menu.png" alt="">
    </button>
       <div class="navbar-log-title">
    <a class="navbar-brand" href="#"><img src="@/assets/img/log.png" alt=""></a>
    <span>ZTC</span>
  </div>
   <ul class="navbar-nav  mb-2 mb-lg-0  navbar-nav-max">
      <li class="nav-item">
          <a class="nav-link" href="#"> <router-link to="/home">Cross-chain</router-link> </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><router-link to="/pledge">Pledge</router-link></a>
        </li>
         <li class="nav-item">
          <a class="nav-link" href="#"><router-link to="/node">Node </router-link></a>
        </li>
      </ul>

   <div class="right-iocn">
      <img src="@/assets/img/my.png" alt="">
      <img src="@/assets/img/wallet.png" alt="">
    </div>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
       <li class="nav-item">
          <a class="nav-link" href="#"> <router-link to="/home">Cross-chain</router-link> </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><router-link to="/pledge">Pledge</router-link></a>
        </li>
         <li class="nav-item">
          <a class="nav-link" href="#"><router-link to="/node">Node </router-link></a>
        </li>
      </ul>
    </div>
  </div>
</nav>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {

    }
  },
  computed: {

  },
  methods: {

  }

}
</script>

<style scoped lang="less">
a {
  text-decoration: none !important;
}

@media(max-width:768px) {
  .right-iocn img{
  width: 30px;
  height: 30px;
  margin-top: 3px;
}

  .navbar-nav-max{
    display: none !important;;
  }
  .right-iocn{
    margin-left: auto;
  }

  .navbar-brand img{
  width:25px;
  height: 25px;
}

.navbar-log-title span{
  padding:7px 0 0 0;
  color: rgb(0, 0, 0);
  font-size: 22px;
  font-weight: 600;
  margin-left: -5px;
}

.menu-button{
  margin-left: -5px;
  margin-top: 3.4px;
  border: 0;
}

.menu-iocn{
width: 35px;
height: 35px;
}

}

@media(min-width:768px) {
  .right-iocn img{
  width: 40px;
  height: 40px;
}
.navbar-brand img{
  width:30px;
  height: 30px;
}

.navbar-log-title span{
  padding: 6px 0 0 0;
  color: rgb(0, 0, 0);
  font-size: 25px;
  font-weight: 700;
  line-height: 2px;
}
.menu-button{
  display: none;
}
.navbar-nav-max{
margin-left: auto ;
margin-right:1.5% ;
}
.navbar-nav-max a{
font-size: 15px;
font-weight: 600;
margin: 0 7px 0 7px;
}
}

// @media(min-width:990px) {
//   .navbar-nav-max a{
// font-size: 20px;
// font-weight: 600;
// margin: 0 15px 0 15px;
// }
// }

@media(min-width:992px) {
  #navbarSupportedContent{
    display: none !important;
   }
  .right-iocn img{
  width: 40px;
  height: 40px;
}
.navbar-brand img{
  width:30px;
  height: 30px;
}

.navbar-log-title span{
  padding: 6px 0 0 0;
  color: rgb(0, 0, 0);
  font-size: 25px;
  font-weight: 700;
  line-height: 2px;
}

.menu-button{
  display: none;
}
.navbar-nav-max a{
font-size: 20px;
font-weight: 600;
margin: 0 7px 0 7px;
}
}
.menu-button{
  background-color: rgba(253, 241, 6, 1);
}

body .bg-body-tertiary {
  background: rgba(253, 241, 6, 1) !important; /* 红色, 透明度为1 */
}

.container-fluid{
  width: 95% !important;
}

.navbar-log-title{
  display: flex;
  align-items: center;
}
.router-link-active {
  text-decoration: none;
  color: rgb(0, 0, 0);
}
a{
  text-decoration: none;
  color: rgb(128, 128, 128);
}
</style>
